<template>
  <div id="myConsultation" class="person-detail">
    <div>
      <van-nav-bar title="我的咨询" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div class="communityDoctor-body">
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div v-for="(item, index) in feedBackContentList" :key="index" class="feedback-body">
            <div style="display:flex;">
              <p class="feedback-tag">
                <van-tag type="danger">咨询</van-tag>
              </p>
              <div style="width:310px">
                <div v-for="(item1,index1) in item.advisoryDetailList" :key="index1">
                  <div class="message-body">
                    <p class="message-title" v-if="index1 == 0">{{ item1.problem }}</p>
                    <!-- <p class="message-content width-p" v-else-if="index1 != 0">{{ item1.problem }}</p> -->
                    <p class="message-content width-p" @click="addComments(index)" v-if="item1.content">
                      <span v-if="item1.content">{{item1.lastUpdatedByName}}医生:</span>
                      <span style="word-break:break-all" v-html="item1.content"></span>
                    </p>
                    <p class="message-content width-p" v-if="item1.problem">
                      <span v-if="item1.content">我:</span>
                      <span style="word-break:break-all">{{item1.problem}}</span>
                    </p>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <div v-show="showInput" class="input-pinlun">
      <van-field v-model="message" type="textarea" placeholder="评论" rows="2" autosize :focus="inputFocus">
        <van-button slot="button" size="small" type="primary" @click="confirmpinlun()">确定</van-button>
      </van-field>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "myConsultation",
    components: {},
    data() {
      return {
        loading: false,
        finished: false,
        isLoading: false,
        showInput: false,
        count: 1,
        clickIndex: "",
        message: "",
        feedBackContentList: []
      };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      onLoad() {
        this.getInfo();
      },
      confirmpinlun() {
        if (this.message == '') {
          this.showInput = false
          return
        }
        let data = {
            advisoryId: this.feedBackContentList[this.clickIndex].advisoryEntity.id,
            problem: this.message
          },
          that = this
        mine.medicalAdvisory_v1_createDetail(data).then(res => {
          if (res.code == "0") {
            that.$toast('')
            let obj = {
              lastUpdatedByName: JSON.parse(localStorage['userInfo']).currentUser.id,
              problem: this.message
            }
            that.$nextTick(() => {
              that.feedBackContentList[this.clickIndex].advisoryDetailList.push(obj)
            })
            this.showInput = false
          }
        });
      },
      onRefresh() {
        this.feedBackContentList = []
        this.count = 1;
        this.getInfo();
      },
      inputFocus() {

      },
      addComments(index) {
        this.showInput = true;
        this.inputFocus = true
        this.clickIndex = index;
      },
      getInfo() {
        let data = {
          curPage: this.count,
          pageSize: (this.count) * 10
        };
        mine.medicalAdvisory_v1_list_frontEnd(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.feedBackContentList = [...this.feedBackContentList, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count) * 10) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss">
  #myConsultation {
    .van-cell {
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      background-color: #EBEEF5;

    }

    .input-pinlun {
      position: fixed;
      top: 90%;
      background-color: #cccccc;
      width: 100%;
      color: #e4e4e4;

      input.van-field__control,
      textarea.van-field__control {
        color: #555555;
        background-color: #fff;
        border-radius: 3px;
      }
    }

    background: #fff;

    .feedback-tag {
      margin: 0;
      width: 30px;
    }

    .feedback-body {
      padding: 15px;
      border-bottom: 1px solid #f5f5f5;
    }

    .message-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 22px;
      text-align: left;
      margin: 0;
      padding-bottom: 10px;
    }

    .message-body {
      width: 95%;
      padding-left: 10px;
    }

    .message-content {
      border-radius: 10px;
      font-size: 12px;
      color: #999999;
      letter-spacing: 0;
      line-height: 20px;
      text-align: left;

      >span:nth-child(1) {
        color: #1ecda5;
      }
    }

    .van-tag--danger {
      background-color: #f5f5f5;
      color: #dc4630;
    }
  }
</style>